<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    input,
    button {
      outline: none;
    }

    .l {
      float: left;
    }

    .r {
      float: right;
    }

    .clear-fix::after {
      content: '';
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
    }

    .container {
      width: 550px;
      margin: 50px auto;
    }

    .header input {
      width: 400px;
      height: 30px;
      padding: 5px 10px;
      line-height: 30px;
      border: 1px solid #ccc;
      border-radius: 2px;
    }

    .header button {
      width: 80px;
      height: 40px;
      padding: 15px 10px;
      text-align: center;
      line-height: 5px;
      border: none;
      color: #fff;
      background-color: #007bff;
      border-radius: 5px;
      cursor: pointer;
    }

    ul {
      width: 100%;
      margin-top: 30px;
      list-style: none;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    ul li {
      float: left;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ccc;
    }

    ul li:last-child {
      border-bottom: none;
    }

    ul li span {
      margin-left: 10px;
      cursor: pointer;
    }

    ul li a {
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <section class="container">
    <section class="header clear-fix">
      <input type="text" placeholder="请输入内容" class="l input">
      <button class="r">发布消息</button>
    </section>
    <section>
      <ul class="news clear-fix">

      </ul>
    </section>
  </section>
  <script src="./jquery.js"></script>
  <script>
    function getValue() {
      $.ajax({
        method: 'get',
        url: 'http://127.0.0.1:3001/list',
        success(res) {
          res = JSON.parse(res)
          let str = ''
          res.forEach(item => {
            str += `
              <li>
                <span class="l">${item.title}</span>
                <input style="display:none; margin-top:20px; height:20px;" class="l"/>
                <a href="javascript:;" class="r">${item.option}</a>
              </li>
              `
          })
          console.log(str)
          $('.news').html(str)
        }
      })
    }
    function addValue(data) {
      $.ajax({
        method: 'post',
        url: 'http://127.0.0.1:3001/add',
        data: { data },
        success(res) {
          if (res.status !== 200) {
            alert(res.message)
          } else {
            alert(res.message)
          }
          getValue()
        }
      })
    }
    function deleteValue(value) {
      $.ajax({
        method: 'delete',
        url: 'http://127.0.0.1:3001/delete/' + value,
        success(res) {
          console.log(res)
          if (res.status !== 200) {
            alert(res.message)
          } else {
            alert(res.message)
          }
          getValue()
        }
      })
    }
    function editorValue(oldValue, newValue) {
      $.ajax({
        method: 'put',
        url: 'http://127.0.0.1:3001/editor',
        data:{
          oldValue,
          newValue
        },
        success(res) {
          if (res.status !== 200) {
            alert(res.message)
          } else {
            alert(res.message)
          }
          getValue()
        }
      })
    }
    getValue()
    $(function () {
      $('button').on('click', function () {
        $('.input').val()
        if ($('input').val().trim().length === 0) return alert('请输入内容!')
        let value = $('input').val()
        addValue(value)
        $('input').val('')
      })
      $('.news').on('click', 'a', function () {
        const value = $(this).siblings('span').html()
        deleteValue(value)
      })
      $('.news').on('dblclick', 'span', function () {
        $(this).css({
          "display": "none"
        }).siblings('input').css({
          "display": "block"
        })
        $(this).siblings('input').on('blur', function () {
          $(this).css({
            "display": "none"
          }).siblings('span').css({
            "display": "block"
          })
          const oldValue = $(this).siblings('span').html()
          const newValue = $(this).val()
          $(this).val('')
          console.log(newValue)
          console.log(oldValue)
          editorValue(oldValue, newValue)
        })
        
      })
    })
  </script>
</body>

</html>